<template>
    <div>
        <b-modal ref="ControlNodeSlideModal" class="modal-slide" hide-header hide-footer>
            <Form :model="controlNodeForm" label-position="top">
                <FormItem label="名称">
                    <i-input v-model="controlNodeForm.name" placeholder="请输入风控节点的名称" />
                </FormItem>
                <FormItem label="描述">
                    <i-input type="textarea" v-model="controlNodeForm.description" placeholder="请输入风控节点的描述" />
                </FormItem>
                <FormItem style="text-align:center;">
                    <Button 
                        :loading="controlNodeForm.loading" 
                        type="primary" class="mr-2" 
                        @click="() => {
                            let self = this;
                            let modal = self.controlNodeForm;

                            modal.confirm.call(self);
                        }">确定</Button>
                    <Button 
                        type="ghost" 
                        @click="() => {
                            let self = this;    
                            controlNodeForm.cancel.call(self);
                        }">取消</Button>
                </FormItem>
            </Form>
        </b-modal>

        <div class="mb-4">
            <h4 class="font-weight-bold" style="display:inline-block;">风控节点</h4>
            <div class="float-right">
                <Button type="info" class="ml-2" shape="circle" icon="clipboard" @click="$router.push('/riskTool/scorecard/home')">打分卡</Button>
                <Button type="info" class="ml-2" shape="circle" icon="android-warning" @click="$router.push('/riskTool/alertRule/home')">预警规则</Button>
                <!-- <Button type="info" class="ml-2" shape="circle" icon="plus-round" @click="$router.push('/product/applyObjectDef/list')">新增风控对象</Button> -->
                <Button class="ml-2" shape="circle" icon="arrow-return-left" @click="$router.push('/product/list')">返回</Button>
            </div>
        </div>

        <b-card no-body class="mb-4">
            <b-card-header header-tag="h5" text-variant="white" class="with-elements pr-0 pb-0">
                <div class="card-header-title" style="font-weight:bold;">
                    <span v-if="currentService.oid">{{currentService.name}}</span>
                    <span v-else class="text-muted">
                        <Icon type="alert-circled"></Icon> 请返回列表页，选择金融服务</span>
                </div>
            </b-card-header>
            <b-card-body>
                <Row class="mb-2">
                    <i-col span="24" class="text-left text-secondary">
                        <span v-if="currentService.remark">{{currentService.remark}}</span>
                        <span v-else class="text-muted">暂无描述</span>

                    </i-col>
                </Row>
                <Row>
                    <i-col span="8">
                        <span class="text-light">
                            总授信：8千万
                        </span>
                    </i-col>
                    <i-col span="8">
                        <span class="text-info">
                            活动客户：8734个
                        </span>
                    </i-col>
                    <i-col span="8">
                        <span class="text-success">
                            当前放款：￥242,342,334
                        </span>
                    </i-col>
                </Row>
            </b-card-body>
        </b-card>

        <b-card>
            <Row>
                <i-col span="24">
                    <Button type="primary" size="small" icon="plus-round" @click="addControlNodeShow()">添加节点</Button>
                </i-col>
            </Row>
            <Row>
                <i-col span="24">
                    <sky-table :data="table.dataList" :columns="table.columns" :show-pagination="false" :show-index="table.showIndex"></sky-table>
                </i-col>
            </Row>
        </b-card>

    </div>
</template>


<style>
.modal-dialog {
    width: 400px !important;
}

.ivu-form-label-top label.ivu-form-item-label {
    margin-bottom: 0px !important;
}
td.ivu-table-expanded-cell {
    padding: 20px 10px !important;
}

td.ivu-table-expanded-cell > card-body {
    padding: 20px !important;
}
</style>


<script>
import Vue from "vue";
import { ClientTable } from "vue-tables-2";
import { SweetModal, SweetModalTab } from "sweet-modal-vue";
import expandRow from "./expend-table";
import {isEmptyObj} from '@/utils/assist'

Vue.use(ClientTable);

export default {
    name: "tables-vue-tables-2",
    metaInfo: {
        title: "Vue Tables 2 - Tables"
    },
    components: {
        SweetModal,
        SweetModalTab,
        expandRow
    },
    data () { 
        return {    
            controlNodeForm: {
                oid: null,
                isAdd: true,
                name: '',
                description: '',
                loading: false,
                confirm: function(){
                    let self = this;
                    let modal = self.controlNodeForm;

                    if(modal.isAdd){
                        self.addControlNode().then(function(){
                            
                            // 成功提示
                            self.$Message.info('新增成功');
                            // 刷新数据
                            self.table.dataList = [];
                            self.loadControlNodeList().then( (res) => {
                                if(res.code === 0){
                                    self.table.dataList = res.data.data ? res.data.data : [];
                                }
                            });
                            // 清空表单
                            modal.name = '';
                            modal.description = '';
                            // 隐藏弹窗
                            self.hideSlideModal();
                        });
                    }else{
                        self.editControlNode().then(function(){
                            
                            // 成功提示
                            self.$Message.info('修改成功');
                            // 刷新数据
                            self.table.dataList = [];
                            self.loadControlNodeList().then( (res) => {
                                if(res.code === 0){
                                    self.table.dataList = res.data.data ? res.data.data : [];
                                }
                            });
                            // 清空表单
                            modal.name = '';
                            modal.description = '';
                            // 隐藏弹窗
                            self.hideSlideModal();
                        });
                    }

                },
                cancel: function(){
                    this.hideSlideModal();
                }
            },
            table: {
                columns: [
                    {
                        type: "expand",
                        width: 50,
                        render: (h, params) => {
                            return h(expandRow, {
                                props: {
                                    row: params.row
                                }
                            });
                        }
                    },
                    {
                        title: "节点名称",
                        key: "name",
                        width: 250
                    },
                    {
                        title: "描述",
                        render: (h, context) => {
                            let vm = this;
                            return h(
                                "div",
                                {
                                    class: "text-light"
                                },
                                context.row.description
                            );
                        }
                    },
                    {
                        title: "操作",
                        align: "center",
                        width: 120,
                        render: (h, context) => {
                            let vm = this;
                            return (
                                <div>
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-1"
                                        title="编辑节点"
                                        icon="wrench"
                                        onClick={() => {
                                            let self = this,
                                                rowData = context.row,
                                                modal = self.controlNodeForm;
                                            
                                            // 赋值
                                            modal.oid = rowData.oid;
                                            modal.name = rowData.name;
                                            modal.isAdd = false;
                                            modal.description = rowData.description;

                                            // 显示弹窗
                                            self.showSlideModal();
                                        }}
                                    >
                                    </i-button>
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-1"
                                        title="删除节点"
                                        icon="trash-b"
                                        onClick={() => {
                                            let self = this,
                                                rowData = context.row;
                                            self.$Modal.confirm({
                                                title: "系统提示",
                                                content: "<p>确认删除“" + rowData.name + "”节点？</p>",
                                                onOk: () => {
                                                    self.deleteControlNode(rowData.oid).then(function(resp){
                                                        if(resp.code === 0){
                                                            // 删除成功提示
                                                            self.$Message.success("删除成功!");
                                                            // 刷新数据
                                                            self.table.dataList = [];
                                                            self.loadControlNodeList().then( (res) => {
                                                                if(res.code === 0){
                                                                    self.table.dataList = res.data.data ? res.data.data : [];
                                                                }
                                                            }); 
                                                        }else{
                                                            self.$Message.error("删除失败！");
                                                        }
                                                    });
                                                },
                                                onCancel: () => {
                                                    self.$Message.info("取消删除");
                                                }
                                            }); 
                                        }}
                                    >
                                    </i-button>
                                </div>
                            )
                        }
                    }
                ],
                dataList: []
            },
            currentService: {
                oid: null,
                name: null,
                remark: ''
            }
        }
    },
    mounted() {
        let self = this,
            urlQueryObj = self.$route.query;

        // 当前选中的金融服务
        if(!isEmptyObj(urlQueryObj)){
            self.currentService = {
                oid: urlQueryObj.oid,
                name: urlQueryObj.name,
                remark: urlQueryObj.remark
            }

            // 获取进入风控节点
            if(self.currentService.oid){
                self.loadControlNodeList().then( (res) => {
                    if(res.code === 0){
                        self.table.dataList = res.data.data ? res.data.data : [];
                    }
                });
            }
        }
    },
    methods: {
        editControlNode(){
            let self = this,
                oid = self.currentService.oid,
                url = `/app/v1/riskNodes/${self.controlNodeForm.oid}`,
                param = {
                    name : self.controlNodeForm.name,
                    description : self.controlNodeForm.description
                };

            return new Promise(function(resolve,reject){
                self.$http.put(url,param)
                    .then(function(res) {
                        resolve(res);
                    },function(res){
                        reject(res);
                    });
            });
        },
        deleteControlNode(oid){
            let self = this,
                url = `/app/v1/riskNodes/${oid}`;

            return new Promise(function(resolve,reject){
                self.$http.delete(url)
                    .then(function(res) {
                        resolve(res);
                    },function(res){
                        reject(res);
                    });
            });

        },
        addControlNode(){
            let self = this,
                oid = self.currentService.oid,
                url = `/app/v1/riskServices/${oid}/riskNodes`,
                param = {
                    name : self.controlNodeForm.name,
                    description : self.controlNodeForm.description
                };

            return new Promise(function(resolve,reject){
                self.$http.post(url,param)
                    .then(function(res) {
                        resolve(res);
                    },function(res){
                        reject(res);
                    });
            });
        },
        loadControlNodeList(){
            let self = this;
            let url = '/app/v1/riskServices/'+self.currentService.oid+'/riskNodes';
        
            return new Promise(function(resolve,reject){
                self.$http.get(url).then(res => {
                    if(res.code === 0){
                        resolve(res);
                    }else{
                        reject(res);
                    }
                });
            });
        },
        addControlNodeShow(){
            this.controlNodeForm.isAdd = true;
            this.showSlideModal();
        },
        showSlideModal () {
            this.$refs.ControlNodeSlideModal.show()
        },
        hideSlideModal () {
            this.$refs.ControlNodeSlideModal.hide()
        },
        edit(row) {
            alert(`Edit: ${row.first_name} ${row.last_name}`);
        },
        remove(row) {
            alert(`Remove: ${row.first_name} ${row.last_name}`);
        }
    }
};
</script>
